<template>
    <div class="custom-node shadow1" :class="{ 'clicked': props.clickNodeId === props.data.id }">
        <!-- 输入处理句柄 -->
        <Handle type="target" :position="Position.Left"
            :style="{ height: '25px', width: '12px', backgroundColor: '#F05E1C' }" />
        <!-- 节点内容 -->
        <div style="display: flex; justify-content: left; align-items: center;">
            <img :src="getSrc(data.icon)" alt="" style="height: 20px; width:20px;">
            <h5 style="margin-left: 10px; font-size: 12px;margin: 2px ; ">{{ data.label }}</h5>
        </div>
        <div style="padding: 10px;text-align: left;" v-if="data.desc">
            <el-text class="limited-lines" style="word-wrap: break-word; font-size: 12px; overflow-wrap: break-word;">
                {{ data.desc }}
            </el-text>
        </div>

        <!-- 输出处理句柄 -->
        <Handle type="source" :position="Position.Right"
            :style="{ height: '25px', width: '12px', backgroundColor: '#81C7D4' }" />
    </div>
</template>

<script setup>
import { defineProps, ref, onMounted, onUnmounted } from 'vue';
import { Handle, Position } from '@vue-flow/core';
import emitter from '@/utils/emitter';

const props = defineProps({
    data: {
        type: Object,
        required: true
    },
    clickNodeId: {
        type: String,
        default: ''
    }
});

// 监听事件
onMounted(() => {
});

const getSrc = (url) => {
    return import.meta.env.VITE_APP_BASE_API + url + '?version=' + Date.now();
};
</script>

<style scoped>
.custom-node {
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    background-color: #FCFCFD;
    position: relative;
    padding: 10px;
    /* 为了让 Handle 可以绝对定位 */
    max-width: 300px;
}

span {
    display: inline-block;
    max-width: 270px;
    word-wrap: break-word;
}

.shadow1 {
    box-shadow: 2px 2px 5px gray;
}

.clicked {
    background-color: #b0e0e6;
    /* 点击时的背景颜色 */
}

.limited-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
</style>